export default {
    data: {
        canvas: null,
        ctx: null,
        oRange: 10,
        oW: 250,
        oH: 250,
        r: null,
        cR: null,
        xOffset: null,
        axisLength: null,
        unit: null,
        range: null,
        nowRange: null,
        data: null,
        nowData: null,
        sp: null,
        waveUpSp: null,
        arkStack: null,
        bR: null,
        sOffset: null,
        circleLock: null,
        cStartPoint: null,
    },
    onInit(){
        this.$watch('oRange','render');
    },
    onPageShow() {
        this.CircleInit();
    },
    CircleInit() {
        let can = this.$element('c');
        this.ctx = can.getContext('2d');
        // 线宽
        this.ctx.lineWidth = 2;
        // 大半径
        this.r = (this.oW / 2);
        this.cR = this.r - 10*this.ctx.lineWidth;
        this.ctx.beginPath();
        // 水波动画初始参数
        this.axisLength = 2*this.r - 16*this.ctx.lineWidth;  // Sin 图形长度
        this.unit = this.axisLength / 9; // 波浪宽
        this.range = .4 // 浪幅
        this.nowRange = this.range;
        this.xOffset = 8*this.ctx.lineWidth; // x 轴偏移量
        this.data = ~~(this.oRange) / 100;   // 数据量
        this.sp = 0; // 周期偏移量
        this.nowData = 0;
        this.waveUpSp = 0.006; // 水波上涨速度
        // 圆动画初始参数
        this.arcStack = [];  // 圆栈
        this.bR = this.r-8*this.ctx.lineWidth;
        this.sOffset = -(Math.PI/2); // 圆动画起始位置
        this.circleLock = true; // 起始动画锁
        // 获取圆动画轨迹点集
        for(var i = this.sOffset; i< this.sOffset + 2*(Math.PI); i+=1/(8*(Math.PI))) {
            this.arcStack.push([
                this.r + this.bR * Math.cos(i),
                this.r + this.bR * Math.sin(i)
            ])
        }
        // 圆起始点
        this.cStartPoint = this.arcStack.shift();
        this.ctx.strokeStyle = "#1c86d1";
        this.ctx.moveTo(this.cStartPoint[0],this.cStartPoint[1]);
        this.render();
    },
    drawSine () {
        this.ctx.beginPath();
        this.ctx.save();
        var Stack = []; // 记录起始点和终点坐标
        for (var i = this.xOffset; i<=this.xOffset + this.axisLength; i+=20/this.axisLength) {
            var x = this.sp + (this.xOffset + i) / this.unit;
            var y = Math.sin(x) * this.nowRange;
            var dx = i;
            var dy = 2*this.cR*(1-this.nowData) + (this.r - this.cR) - (this.unit * y);
            this.ctx.lineTo(dx, dy);
            Stack.push([dx,dy])
        }
        // 获取初始点和结束点
        var startP = Stack[0]
//        var endP = Stack[Stack.length - 1]
        this.ctx.lineTo(this.xOffset + this.axisLength,this.oW);
        this.ctx.lineTo(this.xOffset,this.oW);
        this.ctx.lineTo(startP[0], startP[1])
        this.ctx.fillStyle = "#fbec99";
        this.ctx.fill();
        this.ctx.restore();
    },
    drawText () {
        this.ctx.globalCompositeOperation = 'source-over';
        var size = 0.4*this.cR;
        this.ctx.font = 'bold ' + size + 'px Microsoft Yahei';
        let txt = (this.nowData.toFixed(2)*100).toFixed(0) + '%';
//        var fonty = this.r + size/2;
//        var fontx = this.r - size * 0.8;
        this.ctx.fillStyle = "#f6b71e";
        this.ctx.textAlign = 'center';
        this.ctx.fillText(txt, this.r+5, this.r+20)
    },
    drawYellowCircle(){
        this.ctx.beginPath();
        this.ctx.lineWidth = 15;
        this.ctx.strokeStyle = '#fff89d';
        this.ctx.arc(this.r, this.r, this.cR+7, 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.restore();
    },
    drawGrayCircle(){
        this.ctx.beginPath();
        this.ctx.lineWidth = 10;
        this.ctx.strokeStyle = '#eaeaea';
        this.ctx.arc(this.r, this.r, this.cR-5, 0, 2 * Math.PI);
        this.ctx.stroke();
        this.ctx.restore();
        this.ctx.beginPath();
    },
    drawOrangeCircle(){
        this.ctx.beginPath();
        this.ctx.strokeStyle = '#fbdb32';
        //使用这个使圆环两端是圆弧形状
        this.ctx.lineCap = 'round';
        this.ctx.arc(this.r, this.r, this.cR-5,0 * (Math.PI / 180.0) - (Math.PI / 2),(this.nowData * 360) * (Math.PI / 180.0) - (Math.PI / 2));
        this.ctx.stroke();
        this.ctx.save()
    },
    clipCircle(){
        this.ctx.beginPath();
        this.ctx.arc(this.r, this.r, this.cR-10, 0, 2 * Math.PI,false);
        this.ctx.clip();
    },
    //滑动条控制oRange，但是滑动条未启用
    onSlide(e){
        if (e.mode == "start") {
            this.oRange = e.value;
        } else if (e.mode == "move") {
            this.oRange = e.value;
        } else if (e.mode == "end") {
            this.oRange = e.value;
        }
        this.data = ~~(this.oRange) / 100;
    },
    render() {
        this.ctx.clearRect(0,0,this.oW,this.oH);
        //最外面淡黄色圈
        this.drawYellowCircle();
        //灰色圆圈
        this.drawGrayCircle();
        //橘黄色进度圈
        this.drawOrangeCircle();
        //裁剪中间水圈
        this.clipCircle();
        // 控制波幅
        if (this.data >= 0.85) {
            if (this.nowRange > this.range/4) {
                let t = this.range * 0.01;
                this.nowRange -= t;
            }
        } else if (this.data <= 0.1) {
            if (this.nowRange < this.range*1.5) {
                let t = this.range * 0.01;
                this.nowRange += t;
            }
        } else {
            if (this.nowRange <= this.range) {
                let t = this.range * 0.01;
                this.nowRange += t;
            }
            if (this.nowRange >= this.range) {
                let t = this.range * 0.01;
                this.nowRange -= t;
            }
        }
        if((this.data - this.nowData) > 0) {
            this.nowData += this.waveUpSp;
        }
        if((this.data - this.nowData) < 0){
            this.nowData -= this.waveUpSp
        }
        this.sp += 0.07;
        // 开始水波动画
        this.drawSine();
        // 写字
        this.drawText();
        requestAnimationFrame(this.render)
    }

}
